<%-- 
    Document   : edit_documents
    Created on : May 2, 2013, 3:00:50 PM
    Author     : fikri
--%>
<%@ include file="/WEB-INF/jsp/include/page_header.jspf" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" media="screen" />
        <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/loginstyle.css" />
        <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/prettyPhoto.css" />        
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
        <script src="${pageContext.request.contextPath}/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
        <title>Documents</title>
        <script type="text/javascript">
            $(document).ready(function() {
                $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: ''});
                $('.hide').hide();
                $('#remove').click(function() {
                    $('#document').val('');
                    $("#img_prev").attr("src", '');
                    $(".hide").hide();
                });
                window.opener.blockUI();
                
                 $('#loading-img').hide();

                $('form').submit(function() {
                    $('#loading-img').show();
                });
            });
           function readURL(input) {
                
//                if (!strEndsWith(input.value, "jpeg") && !strEndsWith(input.value, "png")) {
                    if(strEndsWith(input.value, "asf")
                      || strEndsWith(input.value, "avi")
                      || strEndsWith(input.value, "flv")
                      || strEndsWith(input.value, "mkv")
                      || strEndsWith(input.value, "mov")
                      || strEndsWith(input.value, "mp4")
                      || strEndsWith(input.value, "mpeg")
                      || strEndsWith(input.value, "rmvb")
                      || strEndsWith(input.value, "wmv")
                      || strEndsWith(input.value, "3gp")){
                  
                      $('#img_prev').attr('src', '${pageContext.request.contextPath}/images/icon/video/video.png').height(200);
                      $('.hide').show();                      
                    }else if(strEndsWith(input.value, "doc")
                      || strEndsWith(input.value, "docx")
                      || strEndsWith(input.value, "xls")
                      || strEndsWith(input.value, "xlsx")
                      || strEndsWith(input.value, "ppt")
                      || strEndsWith(input.value, "pptx")
                      || strEndsWith(input.value, "pdf")){
                        if (strEndsWith(input.value, "doc")
                            || strEndsWith(input.value, "docx")){
                              $('#img_prev').attr('src', '${pageContext.request.contextPath}/images/icon/microsoft/word.png')
                                      .height(200);
                              $('.hide').show();
                        } else if (strEndsWith(input.value, "xls")
                          || strEndsWith(input.value, "xlsx")){
                            $('#img_prev').attr('src', '${pageContext.request.contextPath}/images/icon/microsoft/excel.png')
                                    .height(200);
                            $('.hide').show();
                        } else if (strEndsWith(input.value, "ppt")
                          || strEndsWith(input.value, "pptx")){
                            $('#img_prev').attr('src', '${pageContext.request.contextPath}/images/icon/microsoft/powerpoint.png')
                                    .height(200);
                            $('.hide').show();
                        } else {
                            $('#img_prev').attr('src', '${pageContext.request.contextPath}/images/icon/microsoft/adobe.png')
                                    .height(200);
                            $('.hide').show();
                        }
                    
                } 
                else{
                    if (input.files && input.files[0]) {                     
                    var reader = new FileReader();

                    reader.onload = function(e) {
                        $('#img_prev')
                                .attr('src', e.target.result)
                                .height(200);
                        $('.hide').show();
                    };

                    reader.readAsDataURL(input.files[0]);
                }
                else {
                    var img = input.value;                    
                    $('#img_prev').attr('src', img).height(200);
                    $('.hide').show();
                }
                $("#x").show().css("margin-right", "10px");
                    
                }                
            }
            
            function strEndsWith(str, suffix) {
                    return str.match(suffix+"$")==suffix;
            }

            function unblock() {
                window.opener.unblockUI();
            }

            function validate() {
                if ($('#document').val() === '') {
                    alert('No Document attached!!');
                    $('#document').focus();
                    return false;
                }
                return true;
            }
        </script>
        <style>
            .validateTips { border: 1px solid transparent; padding: 0.3em; color: red; font-weight: bold}
        </style>
    </head>
    <body onunload="unblock();">
        <s:form beanclass="exatrez.stripes.action.ObservationAction" name="form1">     
            <s:hidden name="observationTask.observationTaskId" id="_id"/>   
            <div id="content">
                <div id="page-title">
                    <span class="title">Upload Documents</span>
                </div>
                <p>
                    <label>&nbsp;</label>
                    <s:file name="document" onchange="readURL(this);" id="document"/>                     
                </p>
                <p>
                    <img id="img_prev" src="#" alt="your image" class="hide"/>
                </p>
                <p>
                    <label>&nbsp;</label>
                    <s:button name="remove" value="Remove" class="btn hide" id="remove"/>    
                    <s:submit name="saveDocuments" value="Upload" class="btn" onclick="return validate();"/>
                    <img src="${pageContext.request.contextPath}/images/loading_img.gif" style="display:none" id="loading-img"/>

                </p>

                <p class="validateTips"><em>NOTE :</em>Right click the thumbnail image to save it.</p>
                <display:table class="tablecloth" name="${actionBean.observationTask.folder.documents}" requestURI="/observation?searchDraftReport" id="line">
                    <display:column title="No.">${line_rowNum}</display:column>
                    <display:column title="File Name">${line.title}</display:column>
                    <display:column title="Thumbnail">
                        <c:choose>
                            <c:when test="${line.contentType eq actionBean.forPdf}">
                                <a href="${pageContext.request.contextPath}/dokumen/view/${line.documentId}" title="${line.title}">
                                    <img src="${pageContext.request.contextPath}/images/icon/microsoft/adobe.png" width="50" height="50"/>
                                </a>
                            </c:when>                           
                            <c:when test="${line.contentType eq actionBean.forXlsx or line.contentType eq actionBean.forXls}">
                                <a href="${pageContext.request.contextPath}/dokumen/view/${line.documentId}" title="${line.title}">
                                        <img src="${pageContext.request.contextPath}/images/icon/microsoft/excel.png" width="50" height="50"/>
                                    </a>
                            </c:when>
                            <c:when test="${line.contentType eq actionBean.forDocx or line.contentType eq actionBean.forDoc}">
                                 <a href="${pageContext.request.contextPath}/dokumen/view/${line.documentId}" title="${line.title}">
                                        <img src="${pageContext.request.contextPath}/images/icon/microsoft/word.png" width="50" height="50"/>
                                    </a>
                            </c:when>
                            <c:when test="${line.contentType eq actionBean.forPptx or line.contentType eq actionBean.forPpt}">
                                <a href="${pageContext.request.contextPath}/dokumen/view/${line.documentId}" title="${line.title}">
                                        <img src="${pageContext.request.contextPath}/images/icon/microsoft/powerpoint.png" width="50" height="50"/>
                                    </a>
                            </c:when>
                            <c:when test="${line.contentType eq actionBean.forVideoMov or 
                                  line.contentType eq actionBean.forVideoMkv or 
                                  line.contentType eq actionBean.forVideoMp4 or 
                                  line.contentType eq actionBean.forVideoAvi or 
                                  line.contentType eq actionBean.forVideoMpeg or 
                                  line.contentType eq actionBean.forVideoWmv or 
                                  line.contentType eq actionBean.forVideoAsf or 
                                  line.contentType eq actionBean.forVideoFlv or 
                                  line.contentType eq actionBean.forVideoRmvb or 
                                  line.contentType eq actionBean.forVideo3gp}">
                           <a href="${pageContext.request.contextPath}/dokumen/view/${line.documentId}" title="${line.title}">
                                    <img src="${pageContext.request.contextPath}/images/icon/video/video.png" width="50" height="50"/>
                                </a>
                             </c:when>
                            <c:otherwise>
                                <a href="${pageContext.request.contextPath}/dokumen/view/${line.documentId}" rel="prettyPhoto[gallery1]" 
                                   title="${line.title}">
                                    <img src="${pageContext.request.contextPath}/dokumen/view/${line.documentId}" width="50" height="50"/>
                                </a>                                
                            </c:otherwise>
                        </c:choose>                        
                    </display:column>
                    <display:column title="delete">
                        <a href="observation?deleteDocument&id=${line.documentId}&ids=${actionBean.observationTask.observationTaskId}" onclick="return confirm('Are you sure to delete this file?');">
                            <img src="${pageContext.request.contextPath}/images/icon/gnome_edit_delete.png" alt="delete" width="20" height="20"/>
                        </a>
                    </display:column>
                </display:table>            
                <s:submit name="" value="CLOSE" class="btn" onclick="self.close();"/>
            </s:form>
        </div>
    </body>
</html>
